<template>
  <el-dialog title="添加页面" :visible="isShowDiaLog" @close="closePage">

    <el-form ref="addForm" :model="form" label-width="120px ">
      <el-form-item label="活动名称" style="width:95%">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="内容" style="width:95%;">

        <VueEditor ref="content" :config="config" />

      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="closePage">取 消</el-button>
      <el-button type="primary" @click="clickBtn">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { postNewPage, editPage, getPage } from '@/api/pageManagement'
import VueEditor from 'vue-word-editor'
import 'quill/dist/quill.snow.css'
export default {
  components: {
    VueEditor
  },
  props: {
    isShowDiaLog: {
      type: Boolean,
      default: false
    }

  },

  data() {
    return {
      config: {},
      form: {

        title: ''

      }

    }
  },

  methods: {
    // 新增页面
    async clickBtn() {
      const a = new Date()
      const res1 = Number(a.toLocaleDateString().replaceAll('/', 0))

      if (this.form.id) {
        await editPage(this.form.id, {
          id: this.form.id,
          title: this.form.title,
          content: this.$refs.content.editor.root.innerHTML,
          created_at: res1,
          updated_at: res1
        })

        this.$message.success('编辑成功')
      } else {
        await postNewPage({
          title: this.form.title,
          content: this.$refs.content.editor.root.innerHTML

        })
        this.$message.success('新增成功')

        this.form.name = ''
        this.$refs.content.editor.root.innerHTML = ''
      }
      this.$emit('addPage')
      this.closePage()
    },

    // 关闭弹框
    closePage() {
      this.form = { title: '' }

      this.$refs.content.editor.root.innerHTML = ''
      this.$refs.addForm.resetFields()
      this.$emit('update:isShowDiaLog', false)
    },
    //
    async getPageData(v) {
      const res = await getPage(v)
      this.form = res
      this.$refs.content.editor.root.innerHTML = res.content
    }

  }

}
</script>

<style>

</style>
